<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/diyUpload.css">
    <link rel="stylesheet" href="css/webuploader.css">
    <title>报表</title>
    <script src="js/jquery-1.10.1.min.js"></script>
    <script src="js/config.js"></script>
    <script src="js/message.js"></script>
</head>
<body>
<div class="nei_header">
    <h3>报表</h3>
    <div class="rentu">
        <img src="images/renturn.png" alt="" onclick="window.history.back(-1)">
    </div>
    <i class="moix"onclick="location.href='tab.html'">菜单</i>
</div>


<div class="danju_con">

    <div class="danju_left shezhi_left">
        <div class="dan_title" style="text-align: center; font-size: 18px;">
            报表类型
        </div>

        <div class="danju_lis shezhi">
            <ul>
                <li class="on"> 商品报表</li>
                <li onclick="location.href='shourubaobiao.html'"> 收入报表</li>
                <li onclick="location.href='tuxingbaobiao.html'"> 图形报表</li>
            </ul>
        </div>
    </div>


    <!--&lt;!&ndash;订单设置开始&ndash;&gt;-->

    <div class="shezhi_con">
        <div class="lst">
            <table style="position: absolute; left: 21%; top: 80px; width: 78%; height: 40px; overflow-y: auto;">
                <tr>
                    <td width="25%">
                        门店：
                        <select id="store" style="width:167px;height: 25px;border: 1px solid #00b8c9;">
                            <option value="">请选择</option>
                        </select>
                    </td>
                    <td width="25%">
                        日期：<input style="height: 25px;border: 1px solid #00b8c9;" id="time" type="date"
                                  placeholder="日期"/>
                    </td>
                    <td width="25%">
                        商品编码：<input style="height: 25px;border: 1px solid #00b8c9;" id="goodsCode" type="text"
                                  placeholder="商品编码"/>
                    </td>
                    <td align="right">
                        <div class="duihcu">
                            <button style="background-color: #ff5555;" onclick="query()">查询</button>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <section style="position: absolute; left: 21%; top: 160px; width: 78%; height: 610px; overflow-y: auto;">
            <div class="main_box">
                <div class="cont_box editpro_box">
                    <!--财务报表-->
                    <table border="0" cellspacing="0" cellpadding="0" class="table" id="table_box">
                        <thead>
                        <tr>
                            <th>商品编码</th>
                            <th>商品名称</th>
                            <th>库存</th>
                            <th>零售价</th>
                            <th>成本价</th>
                            <th>毛利</th>
                            <th>毛利率</th>
                            <th>销售金额</th>
                        </tr>

                        </thead>
                        <tbody id="payBody">

                        </tbody>
                    </table>
                </div>

            </div>
        </section>
        <!--底部-->

        <div class="mifooter">
            <ol style="margin-left: 6%">
                <li>
                    <p id="inventory">0</p>
                    总库存
                </li>
                <li>
                    <p id="salesPrice">0</p>
                    总零售价
                </li>
                <li>
                    <p id="purchasePrice">0</p>
                    总成本价
                </li>
                <li>
                    <p id="profit">0</p>
                    总毛利
                </li>
                <li>
                    <p id="rate">0</p>
                    总毛利率
                </li>
                <li>
                    <p id="sum">0</p>
                    总销售金额
                </li>
            </ol>
            <div class="page">
                <span onclick="initTable(false)">上页</span>
                <span id="pageText">1/1</span>
                <span onclick="initTable(true)">下页</span>
            </div>
        </div>

        <!--底部-->
    </div>

</div>


</body>
<script type="application/javascript">
    var page = 0;
    var total = 0;

    function query() {
        page = 0;
        total = 0;
        initTable(true);
    }

    function initTable(b) {
        if (b) {
            if (total == 0 && page > 0) {
                $.message({
                    message: "无数据",    //提示信息
                    duration: 3000,
                    type: 'info',           //显示类型，包括4种：success.error,info,warning 默认info
                    showClose: false       //显示关闭按钮（默认：否）
                });
                return;
            } else if (total != 0 && total == page) {
                $.message({
                    message: "已是末页",    //提示信息
                    duration: 3000,
                    type: 'warning',           //显示类型，包括4种：success.error,info,warning 默认info
                    showClose: false       //显示关闭按钮（默认：否）
                });
                return;
            }
            page++;
        } else {
            if (page == 1) {
                $.message({
                    message: "已是首页",    //提示信息
                    duration: 3000,
                    type: 'warning',           //显示类型，包括4种：success.error,info,warning 默认info
                    showClose: false       //显示关闭按钮（默认：否）
                });
                return;
            }
            page--;
        }
        let store = $("#store").val();
        let time = $("#time").val();
        let goodsCode = $("#goodsCode").val();
        cashierPost("reports/goods.do", {
            store: store,
            time: time,
            goodsCode: goodsCode,
            pageNo: page,
            pageSize: 50
        }, someFunction);
        cashierPost("reports/total.do", {
            store: store,
            time: time,
            goodsCode: goodsCode
        }, totalFunction);
    }

    function totalFunction(result) {
        if(result != null && result != undefined){
            $("#inventory").text(result.inventory);
            $("#salesPrice").text(result.salesPrice);
            $("#purchasePrice").text(result.purchasePrice);
            $("#profit").text(result.profit);
            $("#rate").text(result.rate);
            $("#sum").text(result.sum);
        }
    }
    
    function someFunction(result) {
        let tableHtml = "";
        if (result.list == null || result.list.length <= 0) {
            $.message({
                message: "无数据",    //提示信息
                duration: 3000,
                type: 'success',           //显示类型，包括4种：success.error,info,warning 默认info
                showClose: false       //显示关闭按钮（默认：否）
            });
        } else {
            for (let m of result.list) {
                tableHtml +=
                    "<tr>" +
                    "<td>" + m.goodsCode + "</td>" +
                    "<td>" + m.goodsName + "</td>" +
                    "<td>" + m.inventory + "</td>" +
                    "<td>" + m.salesPrice + "</td>" +
                    "<td>" + m.purchasePrice + "</td>" +
                    "<td>" + m.profit + "</td>" +
                    "<td>" + m.rate + "</td>" +
                    "<td>" + m.sum + "</td>" +
                    "</tr>";
            }
        }
        $("#payBody").html(tableHtml);
        total = result.pages;
        $("#pageText").text(page + "/" + total);
    }

</script>
</html>